<template>
  <div class="question-type clearfix">
    <div class="oe-paper-top">
      <div class="oe-top-left"></div>
      <div class="oe-top-title">- {{ title }}-</div>
      <div class="oe-top-right"></div>
    </div>
    <div class="test-paper-content">
      <div class="paper-content-top clearfix">
        <div class="fr">
          <span class="set-ruleEdit-label">考试总分：</span>
          <span class="set-content-label">{{ totalScore }}</span>
          <span class="set-ruleEdit-label">（总分需为{{ examScore }}分）</span>
        </div>
      </div>
      <div>
        <div class="paper-content-mess">
          <div>
            <span class="set-ruleEdit-label">题目分类：</span>
            <a-row>
              <a-col :span="3" class="type-label-col" v-for="(list, index) in courseNameList" :key="index">
                <span class="set-paper-lis">{{ list.Name }}</span>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="paper-type-num clearfix">
          <div
            class="paper-num-lis fl"
            v-for="(item, index) in handDisplayData"
            :key="index"
          >
            <div class="exam-num-title">
              <div class="paper-top-title">
                <span v-for="list in topicTitle" :key="list.questionType">
                  <span class="big-title" v-if="item.QuestionType == list.questionType"> {{ item.QuestionType == list.questionType ? list.title : ''}} </span>
                  <span class="sub-title" v-if="item.QuestionType == list.questionType"> {{ item.QuestionType == list.questionType ? list.subTitle : '' }} </span>
                </span>
                <a-tooltip placement="bottom">
                  <template slot="title">
                    <span>添加题目</span>
                  </template>
                  <a-button type="link" :disabled="isCanEdit || importIconUse" @click="onchangetQuestions(item.QuestionType, 'add', index)">
                    <a-icon class="icon" style="color: #1e8dfd" type="plus-circle"></a-icon>
                  </a-button>
                </a-tooltip>
                <a-tooltip placement="bottom">
                  <template slot="title">
                    <span>查看题目</span>
                  </template>
                  <a-button type="link" :disabled="isCanEdit || importIconUse" @click="onchangetQuestions(item.QuestionType, 'lookover', index)">
                    <a-icon class="icon" style="color: #1e8dfd" type="eye"></a-icon>
                  </a-button>
                </a-tooltip>
              </div>
              <div class="paper-top-right"></div>
            </div>
            <div class="paper-num-set clearfix">
              <div class="paper-label-box-number fl">
                <span class="paper-label-num">题目数量</span>
                <div>
                  <a-input-number
                    class="a-number-style"
                    :min="0"
                    :max="item.count"
                    disabled="true"
                    step="1"
                    v-model="item.list.length"
                  /><span style="min-width:20px;">/{{ item.QuesCount }}</span>
                </div>
              </div>
              <div class="paper-label-box fl">
                <span class="paper-label-num">批量设置</span>
                <div>
                  <a-input-number
                    class="a-number-style"
                    :min="0"
                    :disabled="disabled"
                    step="1"
                    v-model="item.score"
                    @change="getPaperScore(index)"
                  />
                </div>
              </div>
              <div class="paper-label-box fl">
                <span class="paper-label-num">题目总分</span>
                <div style="line-height: 32px;">{{ item.total }}分</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="test-paper-btn">
        <a-button type="primary" :disabled="isCanEdit" @click="onSave">{{ saveTitle }}</a-button>
        <a-button :disabled="isCanEdit || importIconUse" @click="onCancel" >{{ cancelTitle }}</a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'qustionType',
  data() {
    return {
      // questionType 题目类型 1.单选题(客观),2.多选题(客观),3.判断(客观),5.填空题(主观),6.问答题(主观),7.匹配题(客观),8.阅读理解(客观),9.完形填空(客观),10.文件作答题(主观),11.视听题(客观)
      // questionType 题目类型 randomQuesNumber 选择题目个数 randomQuesScore 分数, courseId 题目分类Id, onLineKnowledgeIds 知识点Id, onLineKnowledgeTitles 知识点title, defficultys 难度类型
      topicTitle: [
        {
          title: '单选题',
          subTitle: '(客观)',
          questionType: 1
        },
        {
          title: '多选题',
          subTitle: '(客观)',
          questionType: 2
        },
        {
          title: '判断题',
          subTitle: '(客观)',
          questionType: 3
        },
        {
           title: '填空题',
           subTitle: '(客观)',
           questionType: 4
        },
        {
          title: '填空题',
          subTitle: '(主观)',
          questionType: 5
        },
        {
          title: '问答题',
          subTitle: '(主观)',
          questionType: 6
        },
        {
          title: '匹配题',
          subTitle: '(客观)',
          questionType: 7
        },
        {
          title: '阅读理解',
          subTitle: '(客观)',
          questionType: 8
        },
        {
          title: '完形填空',
          subTitle: '(客观)',
          questionType: 9
        },
        {
          title: '视听题',
          subTitle: '(客观)',
          questionType: 11
        },
        {
          title: '阅读理解',
          subTitle: '(主观)',
          questionType: 12
        },
        {
          title: '完形填空',
          subTitle: '(主观)',
          questionType: 13
        }
      ],
      difficulty: [
        { value: 0, label: '简单' },
        { value: 1, label: '一般' },
        { value: 2, label: '困难' },
        { value: 3, label: '非常困难' }
      ],
      paperNumber: 1,
      totalScore: 0,
      mode: 1,
      knowledge: ''
    };
  },
  props: {
    courseNameList: { // 组件数据（一题目分类为基点实现数组循环出题）
      type: Array
    },
    title: { // 组件标题
      type: String,
      default: '标题'
    },
    saveTitle: {  // 确定按钮标题
      type: String,
      default: '保存'
    },
    cancelTitle: {  // 取消按钮标题
      type: String,
      default: '取消'
    },
    disabled: {  // 规则禁止修改类容
      type: Boolean,
      default: false
    },
    isCanEdit: {  // 试卷已启用禁止编辑按钮禁止点击
      type: Boolean,
      default: false
    },
    handDisplayData: {
      type: Array
    },
    examScore: { // 试卷规则分数（后台返回的值）
      type: Number,
      default: null
    },
    importIconUse: {  // 导入试卷禁用icon
      type: Boolean,
      default: false
    },
  },
  computed: {
    displayData: function() {
      return JSON.parse(JSON.stringify(this.handDisplayData));
    }
  },
  watch: {
    handDisplayData: {
      handler: function(newValue) {
        this.getPaperScore();
      },
      deep: true
    }
  },
  methods: {
    // 总分计算
    getPaperScore(index) {
      let totalScore = 0;
      if (index > -1) {
        this.handDisplayData[index].total = this.handDisplayData[index].score  * this.handDisplayData[index].list.length;
        if (this.handDisplayData[index].list.length > 0)
          this.$emit('onChangeScore', index, this.handDisplayData[index].score);
      };
      for (let i = 0; i < this.handDisplayData.length; i++) {
        this.handDisplayData[i].total = this.handDisplayData[i].score * this.handDisplayData[i].list.length;
        totalScore = totalScore + this.handDisplayData[i].total;
      }
      this.totalScore = totalScore;
    },
    // 修改试题
    onchangetQuestions(val, type, index) {
      this.$emit('onModification', val, type, index);
    },
    //保存
    onSave() {
      if (this.examScore !== null && this.totalScore !== this.examScore) {
        return this.$message.error('考试总分必须是' + this.examScore + '分');
      }
      this.getPaperScore();
      let quesJson = this.trimSpace(this.handDisplayData);
      this.$emit('onSave', JSON.stringify(quesJson));
    },
    onCancel() {
      this.$emit('onCancel');
    },
    // 去除数组中为选题为空的对象
    trimSpace(array) {
      // QuestionId":题目Id,"QuesScore":分数
      let newArray = [];
      for (let n = 0; n < array.length; n++) {
        for (let i = 0; i < array[n].list.length; i++) {
          if (array[n].score > 0 || array[n].list[i].QuesScore > 0) {
            newArray = newArray.concat({
              QuestionId: array[n].list[i].Id ? array[n].list[i].Id : '',
              QuesScore: array[n].score > 0 ? array[n].score : array[n].list[i].QuesScore
            });
          }
        }
      }
      return newArray;
    }
  }
};
</script>

<style></style>
